<template>
	<div class="commenFooter">
		<div class="list" :class="{'check':checkIndex==index}" v-for="(item,index) in list" :key="index">
      <u-icon v-if="item.icon" :name="item.icon" size="42" style="margin-bottom: 6rpx;" :color="activeColor(index)"></u-icon>
      <uni-icons v-else :type="item.type" size="24" style="margin-bottom: 6rpx;" :color="activeColor(index)"></uni-icons>
			<text>{{item.title}}</text>
		</div>
	</div>
</template>

<script>
	export default {
		props: ['checkIndex'],
		data() {
			return {
				list: [{
            type: 'notification-filled', // uni-icons
						title: '菜品'
					},
					{
            icon: 'order', // u-icon
						title: '订单'
					},
					{
            type: 'shop-filled', // uni-icons
						title: '商户列表'
					},
				]
			}
		},
    computed: {
      activeColor() {
        return i => this.$props.checkIndex === i ? '#F1B825' : ''
      },
    },
		mounted() {
		}
	}
</script>

<style lang="scss" scoped>
	.commenFooter {
		background-color: #fff;
		padding: 20rpx 0;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		@include flexs(space-between, center);

		div {
			width: 30%;
			font-size: 28rpx;
			@include flexs(center, center);
			flex-direction: column;

			image {
				width: 60rpx;
				height: 60rpx;

				&:nth-child(1) {
					display: block;
				}

				&:nth-child(2) {
					display: none;
				}
			}
		}

		.check {
			color: #F1B825;
			.uni-icons,
      .u-icon {
  			color: #F1B825;
      }
		}

	}
</style>
